<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="../plugins/jquery.1.12.4.min.js"></script>
    <style>
        body {
            background:#B4CDCD;
            font-size: 100%;
        }
        .login{
            position: absolute;
            left: 40%;
            top: 10em;
            color: #000;
            font-size: 1.5em;
            font-weight: 600;
        }

        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset;
            border: 1px solid #CCC!important;
        }

        #userName {
            -webkit-appearance: none;
            outline: none;
            border: none;
            background: #FFFFFF;
            color: #312c3c;
            font-size: 1em;
        }
        #password {
            margin-top: 30px;
            -webkit-appearance: none;
            outline: none;
            text-transform: capitalize;
            border: none;
            background:#ffffff ;
            color: #000000;
            font-size: 1em;
        }
        #doLogin{
            -webkit-appearance: none;
            outline: none;
            text-transform: capitalize;
            background: #1e7ea9;
            height: 30px;
            width: 110px;
            color: #FFFFFF;
            font-size: 0.7em;
            position: absolute;
            left: 258px;
            top: 145px;
        }
        .login a{
            font-size: 0.9em;
            position: absolute;
            left: 0px;
            top: 150px;
            color: #1e7ea9;
        }
    </style>
</head>
<body>
    <div >
        <form class="login" name="form" method="post" autocomplete="off">
            账号: <input id="userName" type="text" name="uid"/><span id="loginSpan"></span><BR>
            密码: <input id="password" type="password" name="pwd"/><BR>
            <input id="rememberMe" type="checkbox" name="rememberBox" style="margin-top: 22px;height: 17px;width: 17px;">
            <span style="font-weight:500;font-size: 20px;color: grey;">记住我</span>
            <a href="../html/opencard.html">前往注册</a>
            <input id="doLogin" type="button" value="登录">
        </form>
    </div>
</body>

<script>
   $(function () {
       $("#doLogin").click(function () {
           var name = $("#userName").val();
           var pwd = $("#password").val();
           var remember = "";
           if($("#rememberMe").get(0).checked){
               remember = "true";
           }else{
               remember = "false";
           }

           $.ajax({
               type:"post",
               url:"/doLogin",
               data:{userName:name,password:pwd,remember:remember},
               dataType:"json",
               success:function (data) {
                   if(data.result == "success"){
                       window.location.href="/admin/index";
                       // $("#logout").attr("display","inline");
                   }else{
                       $("#loginSpan").html("<span style='color: red;font-size: 20px;line-height: 35px;margin-left: 10px;'> 用户名或密码错误</span>");
                   }}
           })
       })
    })
</script>

</html>
